<template>
  <div class="single">
    <el-row>
      <el-col :span="24">
        <el-form
          :model="formModel"
          :rules="rules"
          ref="formModel"
          label-width="110px"
          class="demo-formModel"
        >

          <!-- 培训时间 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="培训时间" prop="pxkssj">
                <el-date-picker
                  type="date"
                  placeholder="请选择培训时间"
                  value-format="yyyy-MM-dd"
                  v-model="formModel.pxkssj"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="培训结束时间" prop="pxjssj">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="请选择培训时间"
                  v-model="formModel.pxjssj"
                  style="width: 15rem"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="培训项目名称" prop="pxxmmc">
                <el-input v-model="formModel.pxxmmc" placeholder="请输入培训项目名称" class="el_select"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 培训方式 -->
          <el-row>
            <el-col :span="8">
              <el-form-item label="培训机构名称" prop="pxjgmc">
                <el-input v-model="formModel.pxjgmc" placeholder="请输入培训机构名称" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="培训方式" prop="pxfs">
                <el-input v-model="formModel.pxfs" placeholder="请输入培训方式" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="参与身份（学员/培训师）" prop="cysf">
                <el-input v-model="formModel.cysf" placeholder="请输入参与身份（学员/培训师）" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="培训获得学时" prop="pxhdxs">
                <el-input v-model="formModel.pxhdxs" placeholder="请输入培训获得学时" class="el_select"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结业证书">
                <el-upload
                  class="avatar-uploader"
                  action=""
                  accept="image/jpeg,image/jpg,image,png"
                  :show-file-list="false"
                  :http-request="submitUploadImgUrl"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="formModel.jyzs" :src="formModel.jyzs" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 学位名称 -->
          <el-row>


          </el-row>


          <el-row class="btns">
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" @click="submitForm('formModel')"
                >{{ btnname }}
                </el-button
                >
                <el-button @click="resetForm('formModel')">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'traininfo',
  data () {
    return {

      formModel: {
        jsId: '',
        pxkssj: '',
        pxjssj: '',
        pxxmmc: '',
        pxjgmc: '',
        pxfs: '',
        cysf: '',
        pxhdxs: '',
        jyzs: ''
      },
      rules: {
        pxkssj: [
          {required: true, message: '请输入培训开始时间', trigger: 'blur'},
        ],
        pxjssj: [
          {required: true, message: '请输入培训结束时间', trigger: 'blur'},
        ],
        pxxmmc: [
          {required: true, message: '请输入培训项目名称', trigger: 'blur'},
        ],
        pxjgmc: [
          {required: true, message: '培训机构名称', trigger: 'blur'},
        ],
        pxfs: [
          {required: true, message: '请输入培训方式', trigger: 'blur'},
        ],
        cysf: [
          {required: true, message: '请输入参与身份（学员/培训师）', trigger: 'blur'},
        ],
        pxhdxs: [
          {required: true, message: '请输入培训获得学时', trigger: 'blur'},
        ]
      },
      btnname: '添加',
      page: {
        id: '',
        op: 'add'
      },

    }
  },
  mounted () {
    this.initdata()
  },
  methods: {
    initdata () {
      var params = this.$route.params
      console.log(params)
      this.page.id = params.id
      this.page.op = params.op
      this.get_detail()
    },
    get_detail () {
      var params = {jsId: this.page.id}
      this.$http({
        url: this.$http.adornUrl('/gnpxxx/getJsAllGnpxxx'),
        method: 'get',
        params: this.$http.adornParams(params)
      }).then(({data}) => {
        console.log(data.data)
        if (data && data.code === 0) {
          if (data.data.length > 0) {
            this.page.op = 'detail'
            this.btnname = '修改'
            this.formModel = data.data[0]
          } else {
            this.page.op = 'add'
            this.btnname = '添加'
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    submitForm (formName) {
      this.formModel.jsId = this.$store.state.user.jsid
      let formData = this.get_formdata(this.formModel)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = ''
          if (this.page.op == 'add') {
            url = '/gnpxxx/save'
          } else {
            url = '/gnpxxx/update'
          }
          this.$http({
            url: this.$http.adornUrl(url),
            data: formData,
            method: 'post'
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                  })
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    get_formdata (config) {
      console.log(config)
      //对象转formdata格式
      const formData = new FormData()
      //循环传入的值转换formData
      Object.keys(config).forEach((key) => {
        formData.append(key, config[key])
      })
      return formData
    },
    handleAvatarSuccess (res, file) {
      this.formModel.photo1 = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    //上传图片
    submitUploadImgUrl (param) {
      var that = this
      let formData = new FormData()
      formData.append('file', param.file)
      this.$http({
        url: this.$http.adornUrl('/file/upload'),
        method: 'post',
        data: formData
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '上传成功',
            type: 'success',
            duration: 1500,
          })
          that.formModel.jyzs = data.data.data[0]
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>


<style>
.single {
  padding: 0.5rem;
}

.el_select {
  width: 15rem;
}

.btns {
  padding-left: 22rem;
}
</style>

